<script setup>
import rftitle from './rftitle.vue'
import { videoList, videoArr } from '../pages/home/index'
import scrollboard from './scrollboard.vue'
import { computed } from 'vue';


const jiankong = computed(() => {
  let one = videoList.value.filter((v) => v.status)
  let two = videoList.value.filter((v) => !v.status)
  return [
    // { status: 1, num: one.length },
    // { status: 3, num: two.length },
    { status: 1, num: videoArr.value.length },
    { status: 3, num: 0 },
  ]
})


const leftTwoConfig = computed(() => {
  let data = videoArr.value.map((v, i) => {
    return [
      // i, v.jkwz, v.sxtid, v.status ? '运行中' : '<span style="color:#ff8080;">已离线</span>'
      i, v.jkwz, v.sxtid, '运行中'
    ]
  })
  return {
    header: ['序号', '监控位置', '设备ID', '监控状态'],
    data,
    rowNum: 10,
    headerBGC: 'rgba(7, 38, 73,0.9)',
    oddRowBGC: 'rgba(6, 30, 61,0.7)',
    evenRowBGC: 'rgba(8, 14, 39,0.7)',
    headerHeight: 32,
    carousel: 'single',
    waitTime: 2000,
    columnWidth: [68, 140, 80, 80]
  }
})



</script>

<template>
  <div>
    <rftitle title="监控状态总览"></rftitle>

    <div class="mt-[33px] mb-[70px] flex justify-around">
      <div class="w-[96px] h-[60px] relative" v-for="(item, index) in jiankong" :key="index">
        <img class="w-full h-full" src="../assets/two/two1.png" alt="">
        <div :class="item.status == 1 ? 'main_color' : 'status_color'"
          class="absolute top-[-9px] flex justify-center text-[32px]  left-0 right-0">{{ item.num }}</div>
        <div class="absolute bottom-[-22px] left-0 right-0 flex justify-center text-[16px] text-white">
          {{ item.status == 1 ? '运行中' : item.status == 2 ? '已关闭' : '已离线' }}
        </div>
      </div>
    </div>
  </div>

  <rftitle class="mb-[24px]" title="监控区域占比"></rftitle>

  <div class="flex items-center">
    <div class="w-[80px] h-[80px] liubian flex justify-center items-center">
      <img class="w-[24px] h-[24px]" src="../assets/two/shexiagntou.png" alt="">
    </div>

    <div class="text-[16px] text-white flex-1 pl-[24px]">
      <div class="flex mb-[14px]">
        <div class="w-[40%]">南楼摄像头</div>
        <div class="w-[30%]">4个</div>
        <div class="w-[30%]">36%</div>
      </div>
      <div class="flex">
        <div class="w-[40%]">北楼摄像头</div>
        <div class="w-[30%]">7个</div>
        <div class="w-[30%]">64%</div>
      </div>



    </div>
  </div>


  <div class="mt-[48px] h-[557px]">
    <scrollboard title="监控详情" :config="leftTwoConfig"></scrollboard>
  </div>
</template>

<style scoped></style>
